<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #demo {
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
        }

        .active {
            background-color: #f00 !important;
        }
    </style>
</head>

<body>
    <div id="demo" class="one two three"></div>
</body>
<script>
    var demo = document.getElementById("demo");



    // className  获取和设置元素的class名(整个)
    // console.log(demo.className); // "one two three"
    // demo.className = "four";
    // demo.className += " four";

    // classList   获取元素的class名的集合
    // classList相关的方法
    // add()       向匹配的元素中新增一个或多个class名(多个用逗号分隔)  返回值:undefined
    // remove()    向匹配的元素中删除一个或多个class名(多个用逗号分隔)
    // replace(oldClass,newClass)   将一个class名替换为另一个
    // contains()  判断匹配的元素中是否存在某个class名
    // toggle()    判断匹配的元素中是否存在某个class名,没有就新增 有就删除
    console.log(demo.classList);

    demo.classList.add("four", "five");
    demo.classList.add("four", "five");


    demo.classList.remove("two", "four");

    demo.classList.replace("three", "third");

    console.log(demo.classList.contains("one"));
    console.log(demo.classList.contains("two"));
    console.log(demo.classList.contains("three"));

    demo.onclick = function () {
        demo.classList.toggle("active");
    }

    console.log(demo.outerHTML);



    // 对比className   classList
    // className -> 修改时,牵一发而动全身,可能覆盖整个 => 一般适用于单class名
    // classList -> 可以通过给定方法,增删改查 切换 某一个名 => 一般适用于多class名



</script>

</html>